<div class="box">
    <div class="box-header with-border">
        <a class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus" (click)="create()">创 建</span></a>
        <div class="box-tools">
            <div class="input-group input-group-sm" style="width: 150px;">
                <input [formControl]="nameFilter" type="text" name="table_search" class="form-control pull-right" placeholder="股票名称">

                <div class="input-group-btn">
                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-bordered">
            <tr>
                <th style="width: 10px">#</th>
                <th>股票名称</th>
                <th>股票价格</th>
                <th>股票评级</th>
                <th>操作</th>
            </tr>
            <!--stockFilter:'name':keyWord-->
            <tr *ngFor="let stock of stocks| async; let i = index;">
                <td>{{i+1}}</td>
                <td>{{stock.name}}</td>
                <td>{{stock.price}}</td>
                <td>
                    <app-stars [rating]="stock.rating"></app-stars>
                </td>
                <td>
                    <a class="btn btn-warning btn-xs" (click)="update(stock)"><span class="glyphicon glyphicon-pencil">修改</span></a>
                    <a class="btn btn-danger btn-xs" href=""><span class="glyphicon glyphicon-trash"></span>删除</a>
                </td>
            </tr>
        </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer clearfix">
        <ul class="pagination pagination-sm no-margin pull-right">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>